<template>
   <vp-main-page @refresh="loadDataList">
	<template #search>
			<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="wjbh">
							<template #label><vp-label zh="编号" en="No."  /></template>
							<el-input v-model="searchForm.wjbh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bt">
							<template #label><vp-label zh="标题" en="Title"  /></template>
							<el-input v-model="searchForm.bt" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xdlxList">
							<template #label><vp-label zh="修订类型" en="Rev. Type" /></template>
							<el-select class="w100" v-model="searchForm.xdlxList" placeholder="请选择/Please Choose" collapse-tags multiple clearable>
								<el-option :value="10" label="新增/Add"></el-option>
								<el-option :value="20" label="修订/Revision"></el-option>
								<el-option :value="30" label="删除/Delete"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col >
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status"/></template>
							<el-select class="w100" v-model="searchForm.ztList" placeholder="请选择/Please Choose" multiple collapse-tags>
								<el-option :value="10" label="草稿 Draft"></el-option>
								<el-option :value="88" label="审批中 Processing"></el-option>
								<el-option :value="89" label="已审批 Processed"></el-option>
								<el-option :value="98" label="作废 Invalid"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="handleSearch"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions v-if="!zt">
			<el-space>
				<vp-btn-add v-auth="'trainingRecord.edit'"  @click="handleAdd"/>
			</el-space>
		</template>
		<template #table>
			<vp-table ref="tableRef" :data="tableData" @sort-change="handleSortChange"   stripe border  style="width: 100%" row-key="id" >
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column
					prop="bh" sortable="custom" 
					show-overflow-tooltip 
					:min-width="120"
					>
					<template #header><vp-label zh="记录单号" en="Rec. No."/></template>
					<template #default="{ row }">
						<el-link @click="handleView(row)" >{{ row.bh }}</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="zt" sortable="custom" 
					show-overflow-tooltip 
					:min-width="180"
					>
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						{{scope.row.zt === 10? '草稿 Draft' : scope.row.zt===20 ? '提交 Submit' : 
						scope.row.zt=== 88 ? '审批中 Processing' : scope.row.zt=== 89 ? '已审批 Processed' :
						scope.row.zt=== 98 ? '作废 Invalid'  : '' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="xdlx" sortable="custom" 
					show-overflow-tooltip 
					:min-width="130"
					>
					<template #header><vp-label zh="修订类型" en="Rev. Type"/></template>
					<template #default="scope">
						{{scope.row.xdlx === 10? '新增/Add' : scope.row.xdlx===20 ? '修订/Revision' : 
						scope.row.xdlx=== 30 ? '删除/Delete'  : '' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="wjlx" sortable="custom" 
					show-overflow-tooltip 
					:min-width="200"
					>
					<template #header><vp-label zh="文件类型" en="Doc. File"/></template>
					<template #default="scope">
						{{scope.row.wjlx === 10? '手册/Manual' : scope.row.wjlx=== 20 ? '工作程序/Work Procedure' : 
						scope.row.wjlx=== 30 ? '表格/Table'  : ''}}
					</template>
				</el-table-column>
				<el-table-column prop="wjbh" sortable="custom"  show-overflow-tooltip :min-width="160">
					<template #header><vp-label zh="编号" en="No."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.wjbh, scope.row.wjbh)"/>
					</template>
				</el-table-column>
				<el-table-column prop="bc" show-overflow-tooltip :min-width="80">
					<template #header><vp-label zh="版次" en="Edition"/></template>
				</el-table-column>
				<el-table-column prop="bt" sortable="custom"  show-overflow-tooltip :min-width="200">
					<template #header><vp-label zh="标题" en="Title"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.bt, scope.row.bt)"/>
					</template>
				</el-table-column>
				<el-table-column  prop="sxrq" show-overflow-tooltip :min-width="140">
					<template #header><vp-label zh="生效日期" en="Effective Date"/></template>
				</el-table-column>
				<el-table-column  prop="xdnrms" show-overflow-tooltip :min-width="140">
					<template #header><vp-label zh="修订内容描述" en="RCD"/></template>
				</el-table-column>
				<el-table-column :label="$t('item.operations')" fixed="right"  width="150" v-if="!zt">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-view text  @click="handleView(scope.row)"></vp-btn-view>
							<vp-btn-edit v-if="scope.row.zt == 10" text v-auth="'qualityManual.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt == 10" text v-auth="'qualityManual.edit'" @click="handleDelete(scope.row)"/>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditQualityManual ref="editRef" @formSubmited="handleFormSubmited"></EditQualityManual>
	</vp-main-page>
</template>
<script setup lang="ts" name="revision">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import router from '/@/router';
import { DEFAULT_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import VpMessageBox from '/@/components/vp/VpMessageBox';

const EditQualityManual = defineAsyncComponent(() => import('./component/EditQualityManual.vue'));

	const tableData = ref([]);
	const loading = ref(false);
	const editRef = ref();
	const showMore = ref(false);
	const searchForm = reactive({
		wjbh: "",
		bt: "",
		xdlxList: [],
		ztList: [10, 88, 89],
	});
	const page = reactive({
		...DEFAULT_PAGE,
	})
	const props = defineProps({
		zt: {
			type: Number,
		},
	});
		
	const loadDataList = () => {
		loading.value = true;
		request.get('/quality/manual/revisionList', {
			params: {
				...searchForm,
				...page,
			}
		}).then(res => {
			tableData.value = res?.data?.list || []
			page.total = res?.data?.total || 0
			page.pageNum = res?.data?.pageNum || 1;
		}).finally(()=>{
			loading.value = false;
		})	
	}

	const searchFormRef = ref();

	const handleSearch = ()=>{
		if(page.pageNum == 1){
			loadDataList();
		}else{
			page.pageNum = 1
		}
	}
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
	}
	const handleSortChange = (column: any)=>{
		page.sortColumn = column.prop;
		page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
		loadDataList();
	}
	onMounted(() => {
		if(props.zt){
			searchForm.ztList = [ 88, 89];
		}
		loadDataList();
	})

	const handleFormSubmited = () =>{
		loadDataList();
	}

	const handleAdd = () => {
		editRef.value.handleOpen("", "add");
	}

	const handleEdit = (row: any) =>{
		editRef.value.handleOpen(row.id, "edit");
	}

	// 删除
	const handleDelete = (row: any)=>{
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/quality/manual/${row.id}/${row.sjbb}`).then(res => {
				loadDataList();
			})
		});
	}

	const handleView = (row: any) =>{
		router.push({
			name: "viewQualityManualRevision",
			params: {
				id: row.id,
			},
		})
	}

</script>
